<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no" />
    <title>确认订单</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <style>
    body {
        background: #f3f3f3;
        font-size: 16px;
    }
    .aui-nav{
        height: auto;
    }
    .aui-icon-left {
        padding-left: 10px;
    }
    
    header {
        width: 100%;
        background: #fff;
        position: relative;
        z-index: 9;
    }
    
    .win_title {
        text-align: center;
        width: 100%;
        line-height: 45px;
        height: 45px;
    }
    
    .aui-iconfont {
        position: absolute;
    }
    
    .content {
        display: inline-block;
    }
    
    .contents {
        margin-left: 25px;
        margin-right: 15px;
        text-align: left;
    }
    
    .contents>span {
        display: block;
    }
    
    .icon {
        position: absolute;
        top: 50%;
        text-align: center;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    
    .address {
        margin-top: 4px;
    }
    
    .addressTop.aui-tab-nav li {
        line-height: inherit;
        height: auto;
        position: relative;
        padding: 15px;
        width: 100%;
        color: #fff;
    }
    
    .aui-tab-nav {
        height: inherit;
        display: block;
        background: #4f6ea6;
    }
    
    .haderTitle li>span {
        float: left;
        display: block;
    }
    .detail{
        overflow: hidden;
        padding:5px 15px;
    }
    .good-pirce {
        color: #ff0005;
        font-weight: bold;
    }
    .total{
        margin-top: 10px;
    }



    .haderTitle li>span{
        float: left;
        display: block;
    }
    .contain{
        margin-top: 45px;
    }
    .contain .aui-tab-nav li{
        line-height: inherit;
        height: auto;
        position: relative;
        padding: 15px ;
        width: 100%;
    }
    .contain .aui-tab-nav{
        height: inherit;
        display:block;
    }
    .contents{
        margin-left: 25px;
        margin-right: 15px;
        text-align: left;
    }
    .content{
        display: inline-block;
    }
    .contents>span{
        display: block;
    }
    .time{
        display: block;
    }
    .icon{
        position: absolute;
        top:50%;
        text-align: center;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .address{
        margin-top: 8px;
    }
    .good{
        background: #fff;
        margin-bottom: 15px;
    }
    .good-pirce{
        color:#ff0005;
        font-weight: bold;
    }
    .good-info-list {
        color: #a3a3a3;
        font-size: 12px;
        line-height: 1.4;
    }
    .company-name {
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        background: #fff;
        padding-left: 15px;
        position: relative;
    }
    .good_bottom {
        /*padding: 15px;*/
    }
    .good_bottom ul li{
        overflow: hidden;
        margin-bottom: 5px;
    }
    .good_bottom ul li span{
        display: block;
    }
    .shiji{
        font-weight: bold;
        font-size: 18px;
    }
    .good-info .aui-list-view{
        margin: 0;
    }
    .contact{
        overflow: hidden;
    }
    .contactMeg,.contactPhone{
        display: block;
        padding: 5px 30px;
        border: 1px solid #9c9c9c;
        float: left;
        width: 48%;
        margin-top: 10px;
    }
    .contactMeg{
        margin-right: 2%;
    }
    .menuRgiht{
        float: right;
        margin-right:20px;
    }
    .good_bottom{
        background: #fff;
    }
    .aui-iconfont{
        margin-right: 5px;
    }
    .total{
        margin-top: 15px;
        margin-bottom: 10px;
    }
    .total .good-pirce{
        font-size: 18px;
    }
    input[type="text"]{
        margin: 0;
    }
    .waitingTips{
        width: 100%;
        background: #ffd9cd;
        text-align: center;
        height: 25px;
        line-height: 25px;
        overflow: hidden;
        color: #ff6868;
        font-size: 12px;
    }
    /*下面弹出的样式*/
    .pickerToTop{
        position: fixed;
        bottom: 0;
        -webkit-transform: translateY(395px);
        height:395px;
        overflow-y:auto; 
        -webkit-transition:  .5s;
        transition:  .5s;
        z-index: 999;
        width: 100%;
        text-align: center;
        background: #fff;
        width: 200%;
    }
    .toTopAnimate{
        -webkit-transform: translateY(00px);
    }
    .pickerToTop .aui-list-view-cell:not(:first-of-type){
        text-align: left;
    }
    /*.pickerToTop .aui-list-view-cell:last-of-type:after{
        border: 0;
    }*/
    .pickerToTop .myBtn{
        position: fixed;
        bottom: 0;
        width: 50%;
    }
    .myBorder{
        /*height: 8px;*/
        /*background: #797979;*/
    }
    .paw{
        background:  url(../../image/pawbg.jpg);
        background-size: contain;
        margin: 0 auto;
        width: 270px !important;
        letter-spacing:40px;
    }
    .pickerToTop .aui-iconfont{
        position: absolute;
        left: 10px;
        top: 10px;
        font-size: 20px;
        color: #000;
        z-index: 9;
    }
    .pay,.checkCard{
        float: left;
        width: 50%;
        position: relative;
    }
    .pickerToTop .aui-list-view-cell:after{
        /*border: 0;*/
    }
    .title{
        background: #fff;
        padding: 15px;
    }
    .good_bottom .aui-list-view:after{
        border: 0;
    }
    span.xiaoji{
        position: relative;
        display: block;
        padding:0 8px;
    }
    span.xiaoji:nth-of-type(2):before{
        position: absolute;
        content:"";
        width: 1px;
        background: #b6b6b6;
        top: 2px;
        right: 0;
        bottom: 2px;
    }
    .good-info{
        margin-bottom: 15px;
    }
    .checkCard .myBtn{
        background: none;
        color:#000;
    }
    .pickerToTop2{
        transition: 0.5s;
    }
    .showCar{
        -webkit-transform:translateX(-50%);
    }
    .pickerToTop ul li:not(:first-of-type){
        font-size: 14px;
    }
    .payList li{
        position: relative;
        
    }
    .payList li img{
        width: 25px;
        vertical-align: middle;
        margin-right: 5px;
    }
    .payList li.payActive:before{
        content:"\e645";
        font-family: "auiicon" !important;
        right: 20px;
        position: absolute;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        color:#327afa;
        border: 1px solid #327afa;
        line-height: 20px;
        text-align: center;
    }
    .pickerToTop2{
        width: 100%;
        overflow: hidden;
        height: inherit;
    }
    .btnAddCard{
        z-index: 99;
    }
    .result{
        display: none;
        padding: 15px;
        padding-top: 100px;
        background: #fff;
    }

    .spanOk{
        display: block;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        background: #ff3333;
        position: relative;
        margin: 0 auto;
        margin-bottom: 10px;
    }
    .spanOk:before{
        position: absolute;
        content: "\e645";
        left: 26%;
        top:10%;
        color: #fff;
        font-size: 25px;
    }
    .ok{
        text-align: center;
        padding-bottom: 15px;
        margin-bottom: 15px;
    }
    .result .aui-btn{
        width: 45%;
        float: left;
        margin-top: 15px;
        margin-right: 10px;
        overflow: hidden;
    }
    .result .waring{
        font-size: 12px;
        color:#646464;
        overflow: hidden;
        margin-top: 15px;
        width: 100%;
    }
    .btns{
        overflow: hidden;
    }
    </style>
</head>

<body>
    <header class=" aui-nav" style="top:0;bottom:inherit;">
        <div class="win_title aui-border-b">
            <div class="aui-pull-left aui-iconfont aui-icon-left icon-left-coler" tapmode onclick="closeWin()"></div>
            <div class="">
                确认订单
            </div>
        </div>
    </header>
    <div class="payContain">
        <div class="contain">
            <ul class="aui-tab-nav aui-border-t haderTitle addressTop">
                <li class="aui-arrow-right" tapmode onclick="openToTwo('my/addressList_win')">
                    <span class="aui-iconfont aui-icon-location icon"></span>
                    <div class="contents">
                        <span class="name aui-pull-left">收货人：黄生</span>
                        <span class="phone aui-pull-right">1871834185252</span>
                        <div class="content address">收货地址：中国广东广州天河区林和西中石化大厦B塔6029 </div>
                    </div>
                </li>
            </ul>
            <div class="title aui-border-b">货品清单</div>
            <div class="good">
                <div class="good-info">
                    <div class="company-name ">
                        <span class="active">订单1：</span>
                         <label class="name ">潮纺花料印刷有限公司</label>
                    </div>
                    <ul class="aui-list-view">
                        <li class="aui-list-view-cell aui-img aui-counter-list">
                           <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                           <div class="aui-img-body">
                               <span class="good-name aui-ellipsis-2">这个是商品标个是商品标题这个是商标题这个是商标题这个是商品标题</span>
                               <div class="good-info-lists">
                                    <div class="good-info-list aui-ellipsis-2">颜色分类：粉红色、粉红色、粉红色、粉红色、粉红色、粉红色、粉红色红色红色</div>
                                    <div class=" aui-pull-left good-pirce">￥5.5</div>
                                    <div class=" aui-pull-right">x<span class="good-count">12</span></div>
                               </div>
                           </div>
                       </li>
                        <li class="aui-list-view-cell aui-img aui-counter-list">
                           <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                           <div class="aui-img-body">
                               <span class="good-name aui-ellipsis-2">这个是商品标个是商品标题这个是商标题这个是商标题这个是商品标题</span>
                               <div class="good-info-lists">
                                    <div class="good-info-list aui-ellipsis-2">颜色分类：粉红色、粉红色、粉红色、粉红色、粉红色、粉红色、粉红色红色红色</div>
                                    <div class=" aui-pull-left good-pirce">￥5.5</div>
                                    <div class=" aui-pull-right">x<span class="good-count">12</span></div>
                               </div>
                           </div>
                       </li>
                   </ul>
                   <div class="good_bottom ">
                      <ul class="aui-list-view">
                            <li class="aui-list-view-cell">
                                <a class="aui-arrow-right">
                                    运费计算
                                    <span class="menuRgiht tixianType">￥0.00元</span>
                                </a>
                            </li>
                            <li class="aui-list-view-cell">
                                <input type="text" placeholder="给卖家留言">
                            </li>
                            <li class="aui-list-view-cell">
                                <span class="aui-pull-right xiaoji">小计：<em class="good-pirce">￥82.20</em></span>
                                <span class="aui-pull-right xiaoji">17件</span>
                            </li>
                        </ul>
                   </div>
                </div>
            </div>
            <div class="good">
                <div class="good-info">
                    <div class="company-name ">
                        <span class="active">订单1：</span>
                         <label class="name ">潮纺花料印刷有限公司</label>
                    </div>
                    <ul class="aui-list-view">
                        <li class="aui-list-view-cell aui-img aui-counter-list">
                           <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                           <div class="aui-img-body">
                               <span class="good-name aui-ellipsis-2">这个是商品标个是商品标题这个是商标题这个是商标题这个是商品标题</span>
                               <div class="good-info-lists">
                                    <div class="good-info-list aui-ellipsis-2">颜色分类：粉红色、粉红色、粉红色、粉红色、粉红色、粉红色、粉红色红色红色</div>
                                    <div class=" aui-pull-left good-pirce">￥5.5</div>
                                    <div class=" aui-pull-right">x<span class="good-count">12</span></div>
                               </div>
                           </div>
                       </li>
                        <li class="aui-list-view-cell aui-img aui-counter-list">
                           <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                           <div class="aui-img-body">
                               <span class="good-name aui-ellipsis-2">这个是商品标个是商品标题这个是商标题这个是商标题这个是商品标题</span>
                               <div class="good-info-lists">
                                    <div class="good-info-list aui-ellipsis-2">颜色分类：粉红色、粉红色、粉红色、粉红色、粉红色、粉红色、粉红色红色红色</div>
                                    <div class=" aui-pull-left good-pirce">￥5.5</div>
                                    <div class=" aui-pull-right">x<span class="good-count">12</span></div>
                               </div>
                           </div>
                       </li>
                   </ul>
                   <div class="good_bottom ">
                      <ul class="aui-list-view">
                            <li class="aui-list-view-cell">
                                <a class="aui-arrow-right">
                                    运费计算
                                    <span class="menuRgiht tixianType">￥0.00元</span>
                                </a>
                            </li>
                            <li class="aui-list-view-cell">
                                <input type="text" placeholder="给卖家留言">
                            </li>
                            <li class="aui-list-view-cell">
                                <span class="aui-pull-right xiaoji">小计：<em class="good-pirce">￥82.20</em></span>
                                <span class="aui-pull-right xiaoji">17件</span>
                            </li>
                        </ul>
                   </div>
                </div>
            </div>
        </div>
        <footer class="aui-nav " >
            <div class="detail aui-border-t">
                <div class="aui-pull-left">
                    <p>店铺优惠:￥0.00</p>
                    <p>运费总计:￥120.00</p>
                    <p>货款总计:￥6235.80</p>
                </div>
                <div class="aui-pull-right total">
                    <p>总计:<span class="good-pirce">￥6355.80</span></p>
                    <p>160种480件不含运费</p>
                </div>
            </div>
            <div class="myBtn" tapmode onclick="showPicker()">提交订单</div>
        </footer>
        <div class="pickerToTop">
            <div class="pickerToTop2">
                <div class="pay">
                    <i class="aui-iconfont aui-icon-roundclose" tapmode onclick="hidePicker()"></i>
                    <ul class="aui-list-view ">
                        <li class="aui-list-view-cell"  >
                            付款详情
                        </li>
                        <li class="aui-list-view-cell" tapmode onclick="showCheckCard()">
                            <a class="aui-arrow-right">
                            支付方式
                            <span class="menuRgiht payMethod">支付宝支付</span>
                            </a>
                        </li>
                        <li class="aui-list-view-cell">
                            <a class="">
                            需付款
                            <span class="menuRgiht">￥6888.88</span>
                            </a>
                        </li>
                    </ul>
                    <div class="myBtn" tapmode onclick="comfirmPay()">确认付款</div>
                </div>
                <div class="checkCard">
                    <i class="aui-iconfont aui-icon-left" tapmode onclick="showCheckCardBack()"></i>
                    <ul class="aui-list-view payList" >
                        <li class="aui-list-view-cell"  >
                            付款详情
                        </li>
                        <li class="aui-list-view-cell payActive" tapmode onclick="checkCardFn(this)">
                            <img src="../../icon/AliPayIcon.png" >支付宝支付
                        </li>
                        <li class="aui-list-view-cell" tapmode onclick="checkCardFn(this)">
                            <img src="../../icon/CMBIcon.png" >招商银行储蓄卡（2130）
                        </li>
                        <li class="aui-list-view-cell" tapmode onclick="checkCardFn(this)">
                            <img src="../../icon/BOCIcon.png" >中国银行储蓄卡（6050）
                        </li>
                        <li class="aui-list-view-cell" tapmode onclick="checkCardFn(this)">
                            <img src="../../icon/ABCIcon.png" >中国农业银行储蓄卡（1480）
                        </li>
                    </ul>
                    <!-- <div class="myBtn aui-border-t btnAddCard" tapmode onclick="openToTwo('my/addCard')">+添加新卡付款</div> -->
                    <div class="myBtn aui-border-t btnAddCard" tapmode onclick="openToTwo('my/addCard');hidePicker()">+添加新卡付款</div> 
                </div>
            </div>
        </div>
    </div>
    <!-- 控制影藏显示 -->
    <div class="result">
        <div class="ok aui-border-b">
            <span class="aui-iconfont aui-icon-check spanOk"></span>
            <p>支付成功</p>
        </div>
        <div class="resultTips">
            <h3>发货信息</h3>
            <p>我们将尽快安排发货，请买家保持手机通讯畅通，以便快递哥哥能第一时间联系到您。</p>
        </div>
        <div class="btns">
            <div class="aui-btn aui-btn-info aui-btn-block aui-btn-outlined" tapmode onclick="openToTwo('orderStatus')">
            查看订单</div>
            <div class="aui-btn aui-btn-info aui-btn-block aui-btn-outlined">
            去首页</div>
        </div>
        <div class="waring">
            <em style="color:#ff3333">＊</em>安全提醒：中纺互联不会以任何理由要求您提供银行卡信息或支付额外费用，请谨防钓鱼链接或诈骗电话。
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/doT.min.js"></script>
<script type="text/javascript" src="../../script/jquery-1.11.3.js"></script>
<script type="text/javascript" src="../../script/mui.js"></script>
<script type="text/javascript">
apiready = function() {
    api.parseTapmode();
    var mobile = api.pageParam.mobile;
    var header = $api.dom('header');
    var footer = $api.dom('footer');
    $api.fixIos7Bar(header);
    
    var header_h = $api.offset(header).h;
    var footer_h = $api.offset(footer).h;
    var body_h = $api.offset($api.dom('body')).h - header_h - footer_h;
    // api.openFrame({
    //     name: 'orderComfirm_frm',
    //     url: 'orderComfirm_frm.html',
    //     rect: {
    //         x: 0,
    //         y: header_h,
    //         w: 'auto',
    //         h: body_h
    //     },
    //     pageParam: {
    //         mobile: mobile
    //     },
    //     bounces: false,
    //     vScrollBarEnabled: false,
    //     hScrollBarEnabled: false
    // });
}
function checkCardFn(obj){
    $(obj).parent().find("li").removeClass("payActive");
    $(obj).addClass("payActive");
    $(".payMethod").text($(obj).text());
    showCheckCardBack();
}
// mui遮罩
var mask = mui.createMask(hidePicker);
// 显示遮罩
function showPicker(obj){
    mask.show();
    $(".pickerToTop").addClass("toTopAnimate");
}
// 关闭遮罩
function hidePicker(){
    $(".pickerToTop").removeClass("toTopAnimate");
    // 延迟0.5s为了不让效果向右下角收缩
    setTimeout(function(){
        $(".pickerToTop2").removeClass("showCar");
    },500);
    mask.myclose();
}
// 右滑选择银行卡
function showCheckCard(){
    $(".pickerToTop2").addClass("showCar");
}
// 右滑选择银行卡
function showCheckCardBack(){
    $(".pickerToTop2").removeClass("showCar");
}
// 支付成功
function comfirmPay(){
    $(".payContain").css({"display":"none"});
    $(".result").css({"display":"block"});
    hidePicker();
}
</script>

</html>
